<template>
  <div class="bed-management">
    <el-card class="bed-container">

      <!-- 统计信息栏 -->
      <div class="stats-bar">
        <div class="stat-item critical">
          <div class="stat-content">
            <img src="@/assets/svg/警灯.svg" style="width: 30px; height: 30px; color: #ff0000">
            <span>重症监护</span>
          </div>
        </div>
        <div class="stat-item in-department">
          <div class="stat-content">
            <div class="stat-number">{{ stats.inDepartment }}</div>
            <span>在科</span>
          </div>
        </div>
        <div class="stat-item new-admission">
          <div class="stat-content">
            <div class="stat-number">{{ stats.newAdmission }}</div>
            <span>新入科</span>
          </div>
        </div>
        <div class="stat-item discharged">
          <div class="stat-content">
            <div class="stat-number">{{ stats.discharged }}</div>
            <span>已出科</span>
          </div>
        </div>
        <div class="stat-item critical">
          <div class="stat-content">
            <div class="stat-number">{{ stats.critical }}</div>
            <span>病危</span>
          </div>
        </div>
        <div class="stat-item serious">
          <div class="stat-content">
            <div class="stat-number">{{ stats.serious }}</div>
            <span>病重</span>
          </div>
        </div>
        <div class="stat-item surgery">
          <div class="stat-content">
            <div class="stat-number">{{ stats.surgery }}</div>
            <span>手术</span>
          </div>
        </div>
        <div class="stat-item death">
          <div class="stat-content">
            <div class="stat-number">{{ stats.death }}</div>
            <span>死亡</span>
          </div>
        </div>
        <div class="view-toggle">
          <el-switch :model-value="viewMode" active-value="card" inactive-value="list" active-text="床卡"
            inactive-text="列表" @update:model-value="toggleViewMode" />
        </div>
      </div>

      <BedCards v-if="viewMode === 'card'" :beds="bedList" />
      <PatientInfoTable v-else :patients="bedList" @current-change="handleCurrentChange" />
    </el-card>

  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import BedCards from './BedCards.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning, User } from '@element-plus/icons-vue'

interface Bed {
  id: string
  bedNumber: string
  patientId: string
  patientName: string
  gender: string
  age: number
  caseNumber: string
  diagnosis: string
  surgery: string
  allergy: string
  doctor: string
  nurse: string
  admissionDate: string
  daysIn: number
  criticalLevel: number
  status: string
}

interface Patient {
  id: string
  name: string
}

const bedList = ref<Bed[]>([
  {
    id: '1',
    bedNumber: 'A101',
    patientId: 'P001',
    patientName: '张三',
    gender: '男',
    age: 45,
    caseNumber: '202312345',
    diagnosis: '高血压3级，冠心病',
    surgery: '冠状动脉造影+支架植入术',
    allergy: '青霉素',
    doctor: '王主任',
    nurse: '李护士长',
    admissionDate: '2025-01-11',
    daysIn: 10,
    criticalLevel: 2,
    status: '占用'
  },
  {
    id: '2',
    bedNumber: 'A102',
    patientId: 'P002',
    patientName: '李四',
    gender: '女',
    age: 62,
    caseNumber: '202312346',
    diagnosis: '2型糖尿病，糖尿病肾病',
    surgery: '无',
    allergy: '无',
    doctor: '赵副主任',
    nurse: '张主管护师',
    admissionDate: '2025-01-15',
    daysIn: 6,
    criticalLevel: 1,
    status: '占用'
  },
  {
    id: '3',
    bedNumber: 'A103',
    patientId: 'P003',
    patientName: '王五',
    gender: '男',
    age: 38,
    caseNumber: '202312347',
    diagnosis: '重症肺炎，ARDS',
    surgery: '气管插管术',
    allergy: '头孢类',
    doctor: '孙主治',
    nurse: '刘护师',
    admissionDate: '2025-01-18',
    daysIn: 3,
    criticalLevel: 3,
    status: '占用'
  },
  {
    id: '4',
    bedNumber: 'A104',
    patientId: 'P004',
    patientName: '赵六',
    gender: '女',
    age: 56,
    caseNumber: '202312348',
    diagnosis: '脑梗死恢复期',
    surgery: '无',
    allergy: '海鲜',
    doctor: '钱主任',
    nurse: '周护士长',
    admissionDate: '2025-01-20',
    daysIn: 1,
    criticalLevel: 1,
    status: '占用'
  },
  {
    id: '5',
    bedNumber: 'B101',
    patientId: '',
    patientName: '',
    gender: '',
    age: 0,
    caseNumber: '',
    diagnosis: '',
    surgery: '',
    allergy: '',
    doctor: '',
    nurse: '',
    admissionDate: '',
    daysIn: 0,
    criticalLevel: 0,
    status: '空闲'
  },
  {
    id: '6',
    bedNumber: 'B102',
    patientId: '',
    patientName: '',
    gender: '',
    age: 0,
    caseNumber: '',
    diagnosis: '',
    surgery: '',
    allergy: '',
    doctor: '',
    nurse: '',
    admissionDate: '',
    daysIn: 0,
    criticalLevel: 0,
    status: '空闲'
  },
  {
    id: '7',
    bedNumber: 'B103',
    patientId: 'P005',
    patientName: '孙七',
    gender: '男',
    age: 72,
    caseNumber: '202312349',
    diagnosis: '慢性心衰急性加重',
    surgery: '无',
    allergy: '阿司匹林',
    doctor: '李主任',
    nurse: '王主管护师',
    admissionDate: '2025-01-19',
    daysIn: 2,
    criticalLevel: 2,
    status: '占用'
  },
  {
    id: '8',
    bedNumber: 'B104',
    patientId: '',
    patientName: '',
    gender: '',
    age: 0,
    caseNumber: '',
    diagnosis: '',
    surgery: '',
    allergy: '',
    doctor: '',
    nurse: '',
    admissionDate: '',
    daysIn: 0,
    criticalLevel: 0,
    status: '维修'
  }
])

const patientOptions = ref<Patient[]>([
  { id: 'P001', name: '张三' },
  { id: 'P002', name: '李四' },
  { id: 'P003', name: '王五' }
])

const getStatusType = (status: string) => {
  switch (status) {
    case '占用': return 'danger'
    case '空闲': return 'success'
    case '维修': return 'warning'
    default: return 'info'
  }
}

// 统计数据
const viewMode = ref<'card' | 'list'>('list') // 默认列表模式

const toggleViewMode = (mode: 'card' | 'list') => {
  viewMode.value = mode
}

const handleCurrentChange = (val: any) => {
  console.log('当前选中行:', val)
}

const stats = computed(() => {
  return {
    inDepartment: bedList.value.filter(b => b.status === '占用').length, // 在科人数
    newAdmission: 3, // 新入科
    discharged: 5, // 已出科
    critical: 1, // 病危
    serious: 2, // 病重
    surgery: 3, // 手术
    death: 0 // 死亡
  }
})

</script>

<style scoped>
.bed-management {
  padding: 10px;
  /* height: 80vh; */
}

.bed-container {
  margin-bottom: 10px;
}

.stats-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  /* padding: 10px; */
  background: transparent;
  border-radius: 4px;
  overflow-x: auto;
  white-space: nowrap;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  aspect-ratio: 3/1;
  height: 60px;
}

.stat-item .el-icon {
  margin-right: 5px;
}

.stat-item {
  background: #e9ecef;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.critical {
  color: #f56c6c;
}

.in-department {
  color: #409eff;
}

.new-admission {
  color: #67c23a;
}

.discharged {
  color: #409eff;
}

.serious {
  color: #f56c6c;
}

.surgery {
  color: #f56c6c;
}

.death {
  color: #f56c6c;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
}

.stat-content .el-icon {
  font-weight: bold;
  font-size: 20px;
}

.stat-content span {
  font-size: 16px;
  font-weight: bolder;
}

.stat-number {
  font-size: 24px;
  font-weight: bolder;
}

.view-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.view-toggle .el-switch {
  margin-left: 10px;
}
</style>
